<template>
    <el-row class="cdetail-row">
        <el-col :span="24">
            <el-card class="box-card tinfo-head-box">
                <div slot="header" class="clearfix">
                    <div class="tinfo-title-header-box" style="background-image:url('/static/img/illustration/i004.jpg')">
                    </div>
                </div>
                <el-row class="user-title-row">
                    <el-col :span="24">
                        <div v-if="data" class="A-name-box" style="margin:0">
                            <h3>{{data.title || '未知'}}</h3>
                            <span v-for="tag in tagArr" class="tag-box">{{tag}}</span>
                        </div>
                        <div class="clear"></div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>文章内容</span>
                    <span style="float: right;color: #797979;">浏览人数：{{data.visitorsIds.length}}</span>
                </div>
                <div class="article-card-content" v-html="data.content">

                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
  import {searchArticleData,saveArticleData} from '../../api/api';
  export default {
    data() {
      return {
        data: [],
        recommendDatas: [],
        cardType: 1,
        userId: '',
        userName: '',

        total: 0,

        page: 0,
        listLoading: false,
      };
    },

    computed: {
      tagArr: function () {
        if(this.data.tag){
          let arr = this.data.tag.split('/');
          console.log(arr);
          return arr
        }
        return [];
      }
    },

    methods: {
      getData(val){
        searchArticleData(val).then((res) => {
          this.data = res.data.data;
          if(!res.data.data.visitorsIds.find(item => item.userId === this.userId)){
                this.saveArticleData();
          }
        });
      },
      saveArticleData(){
         let jsonStr = JSON.parse(JSON.stringify(this.data));
        jsonStr.visitorsIds.push(this.userId);
         saveArticleData(jsonStr).then((res) => {});
      },
    },

    mounted: function () {
      function GetRequest() {
        let url = decodeURI(location.search);
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
          let str = url.substr(1);
          let strs = str.split("&");
          for(let i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
          }
        }
        return theRequest;
      }
      let urlData = GetRequest();

      let user = sessionStorage.getItem('user');
      user = JSON.parse(user);

      this.userId = user.id;
      this.userName = user.name;

      this.getData(urlData.a);
    }
  };
</script>